<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>数据统计</title>
    <!--cdn连接-->
    <!-- layui css -->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <!-- layui js -->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <!--echarts cdn-->
    <script crossorigin="anonymous" integrity="sha512-RuUMLxuB8daxj+iqjuwA7u2lFFFQNlbnFnerb0FPhfZ761E0Wn6wD4f5vZskYgbxu+wSu36vfFHCUDaKaHHhUQ==" src="https://lib.baomitu.com/echarts/5.0.2/echarts.common.js"></script>
    <!--jquery-->
    <script src="./jquery/jquery-3.3.1.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/dataStatistics.css"/>
    <!-- js -->
    <script src="./js/dataStatistics.js"></script>
</head>
<body>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>驾校经营数据分析</legend>
        </fieldset>
        <blockquote class="layui-elem-quote">这里是一个说明</blockquote>
        <!--栅格布局-->
        <div class="layui-row" id = "countDataTpl">
            <script type="text/html" id="countData">
                <div class="layui-col-xs3 layui-bg-orange" style="border-radius: 80px 80px 80px 80px;">
                    <div class="grid">
                        <div class="grid-demo">{{ d.resData.userCount }}</div>
                        <div class="grid-text">注册学员</div>
                    </div>
                </div>
                <div class="layui-col-xs3 layui-bg-red" style="border-left: 10px solid #ffffff;border-radius: 80px 80px 80px 80px;">
                    <div class="grid">
                        <div class="grid-demo">{{ d.resData.orderCount }}</div>
                        <div class="grid-text">订单总量</div>
                    </div>
                </div>
                <div class="layui-col-xs3 layui-bg-blue" style="border-left: 10px solid #ffffff;border-radius: 80px 80px 80px 80px;">
                    <div class="grid">
                        <div class="grid-demo">{{ d.resData.addOrderCount }}</div>
                        <div class="grid-text">新增订单</div>
                    </div>
                </div>
                <div class="layui-col-xs3 layui-bg-cyan" style="border-left: 10px solid #ffffff;border-radius: 80px 80px 80px 80px;">
                    <div class="grid">
                        <div class="grid-demo">{{ d.resData.staff01Count }}</div>
                        <div class="grid-text">在职教练</div>
                    </div>
                </div>
            </script>
        </div>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="echartsDemo" style="width: 80%;height: 600px;margin-top: 80px;margin-left: 10%"></div>

</body>
</html>